<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" >
				<p class="queryLabel">出单日期 :</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="mapData.date" size="small" style="width:100%" type="date" clearable placeholder="选择时间">
				</el-date-picker>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">区域:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="area" placeholder="请选择区域" clearable @change="getCompanyInfo">
					<el-option v-for="item in areaCombo" :label="item.label" :value="item.code"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">品牌:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="brand" @change="getCompanyInfo" placeholder="请选择品牌" clearable>
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.code">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1">
				<p class="queryLabel">公司:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" v-model="mapData.companyId" placeholder="请输入公司名称" clearable>
					<el-option v-for="item in companyCombo" :label="item.oName" :value="item.id"></el-option>
				</el-select>
			</el-col>
			<el-col :span="2" style="text-align: center;">
				<el-button type="primary" size="small" v-on:click='query'>查询</el-button>
			</el-col>
			<el-col :span="2" style="text-align: right;">
				<el-button size="small" type="primary" @click="processOut" v-loading.fullscreen.lock="fullscreenLoading" v-if="btnGroup.export">导出</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			
		</el-row>
		<el-row>
			<div class="report_Fixedwidth">
				<table class="report_table" id="rebateledger" cellpadding="0" cellspacing="0" width="2860px">
					<tbody>
						<tr class="texttbody">
							<th scope="col" style="width: 200px;">4S店</th>
							<th scope="col" style="width: 100px;">新保优惠</th>
							<th scope="col" style="width: 100px;">续保优惠</th>
							<th scope="col" style="width: 100px;">新保差价</th>
							<th scope="col" style="width: 100px;">续保差价</th>
							<th scope="col" style="width: 110px;">新保代理费</th>
							<th scope="col" style="width: 110px;">续保代理费</th>
							<th scope="col" style="width: 100px;">新保税金</th>
							<th scope="col" style="width: 100px;">续保税金</th>
							<th scope="col" style="width: 100px;">新保个税</th>
							<th scope="col" style="width: 100px;">续保个税</th>
							<th scope="col" style="width: 100px;">新保利润</th>
							<th scope="col" style="width: 100px;">续保利润</th>
							<th scope="col" style="width: 120px;">累计新保优惠</th>
							<th scope="col" style="width: 120px;">累计续保优惠</th>
							<th scope="col" style="width: 120px;">累计新保差价</th>
							<th scope="col" style="width: 120px;">累计续保差价</th>
							<th scope="col" style="width: 120px;">累计新保代理费</th>
							<th scope="col" style="width: 120px;">累计续保代理费</th>
							<th scope="col" style="width: 120px;">累计新保税金</th>
							<th scope="col" style="width: 120px;">累计续保税金</th>
							<th scope="col" style="width: 120px;">累计新保个税</th>
							<th scope="col" style="width: 120px;">累计续保个税</th>
							<th scope="col" style="width: 120px;">累计新保利润</th>
							<th scope="col" style="width: 120px;">累计续保利润</th>
						</tr>
						<tr v-for="item in tableData.dataList">
							<td>{{item.oName}}</td><!--4S店-->
                            <td>{{item.sbBackPrice}}</td><!--新保优惠-->
							<td>{{item.xbBackPrice}}</td><!--续保优惠-->
							<td></td><!--新保差价-->
							<td></td><!--续保差价-->
							<td>{{item.sbCommissionPrice}}</td><!--新保代理费-->
							<td>{{item.xbCommissionPrice}}</td><!--续保代理费-->
							<td></td><!--新保税金-->
							<td></td><!--续保税金-->
							<td></td><!--新保个税-->
							<td></td><!--续保个税-->
							<td>{{item.sbNteProft}}</td><!--新保利润-->
							<td>{{item.xbNteProft}}</td><!--续保利润-->
							<td>{{item.sbAllBackPrice}}</td><!--累计新保优惠-->
							<td>{{item.xbAllBackPrice}}</td><!--累计续保优惠-->
							<td></td><!--累计新保差价-->
							<td></td><!--累计续保差价-->
							<td>{{item.sbAllCommissionPrice}}</td><!--累计新保代理费-->
							<td>{{item.xbAllCommissionPrice}}</td><!--累计续保代理费-->
							<td></td><!--累计新保税金-->
							<td></td><!--累计续保税金-->
							<td></td><!--累计新保个税-->
							<td></td><!--累计续保个税-->
							<td>{{item.sbAllNteProft}}</td><!--累计新保利润-->
							<td>{{item.xbAllNteProft}}</td><!--累计续保利润-->
						</tr>
					</tbody>
				</table>
			</div>
			<!--<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;">
					<el-table-column label="部门" prop="oName" width="150px">
					</el-table-column>
					<el-table-column label="新保优惠" prop="sbBackPrice" width="150px">
					</el-table-column>
					<el-table-column label="续保优惠" prop="xbBackPrice" width="150px">
					</el-table-column>
					<el-table-column label="新保差价"  :formatter="sbcj" width="150px" >
					</el-table-column>
					<el-table-column label="续保差价" :formatter="xbcj" prop="" width="150px">
					</el-table-column>
					<el-table-column label="新保代理费"  prop="sbAllCommissionPrice" width="150px">
					</el-table-column>
					<el-table-column label="续保代理费"  prop="xbAllCommissionPrice" width="150px">
					</el-table-column>
					<el-table-column label="新保税金" prop="" width="150px">
					</el-table-column>
					<el-table-column label="续保税金" prop="" width="150px">
					</el-table-column>
					<el-table-column label="新保个税" prop="" width="150px">
					</el-table-column>
					<el-table-column label="续保个税" prop="" width="150px">
					</el-table-column>
					<el-table-column label="新保利润" prop="" width="150px">
					</el-table-column>
					<el-table-column label="续保利润" prop="" width="150px">
					</el-table-column>
					<el-table-column label="累计新保优惠" prop="sSbBackPrice" width="150px">
					</el-table-column>
					<el-table-column label="累计续保优惠" prop="sXbBackPrice" width="150px">
					</el-table-column>
					<el-table-column label="累计新保差价"  :formatter="lsbcj"  width="150px">
					</el-table-column>
					<el-table-column label="累计续保差价"  :formatter="lxbcj" width="150px">
					</el-table-column>
					<el-table-column label="累计新保代理费"  prop="sSbAllCommissionPrice" width="150px">
					</el-table-column>
					<el-table-column label="累计续保代理费"  prop="sXbAllCommissionPrice" width="150px">
					</el-table-column>
					<el-table-column label="累计新保税金" prop="" width="150px">
					</el-table-column>
					<el-table-column label="累计续保税金" prop="" width="150px">
					</el-table-column>
					<el-table-column label="累计新保个税" prop="" width="150px">
					</el-table-column>
					<el-table-column label="累计续保个税" prop="" width="150px">
					</el-table-column>
					<el-table-column label="累计新保利润" prop="" width="150px">
					</el-table-column>
					<el-table-column label="累计续保利润" prop="" width="150px">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>-->
		</el-row>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>
	</div>
</template>

<script>
	import moment from 'moment'
	import exports from '../../plugins/exportModule.vue'
	export default {
		data: function() {
			return{
				//表格数据导出
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//表格名字
				excelName: "保险返利台账.xls",
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				area:"",
				brand:"",
				fullscreenLoading: false,
				mapData: {
					date: new Date(),
				},
				tableData: {
					total: 0,
					dataList: []
				},
				CurentPages: 1,
				page: this.page,
				btnGroup:{},
			}
		},
		methods:{
			//导出 
			processOut: function() {
				debugger;
				this.$data.tableId = "rebateledger";
				this.$data.template = "<template><div><el-row><div><table border='1'>{table}</table></div></el-row></div></template>";
			},
			//导出回调函数
			backFunction: function() {
				this.$data.tableId = "";
			},
			//周报表保费分配导出
			rebateLedgerOut: function() {
				if(this.$data.mapData.date) {
					this.$data.mapData.date = this.moment(this.$data.mapData.date).format("YYYY-MM-DD");
				}else{
					this.$data.mapData.date = '';
				}
				this.$data.fullscreenLoading = true;
				this.$http.post(this.API_ROOT + '/insurance/statstics/rebate/exp/excel', this.$data.mapData, {
						params: {}
					})
					.then(resp => {
						this.$data.fullscreenLoading = false;
						if(resp.data.success) {

							window.location.href = this.API_ROOT + "/base/exp/xlsx?fileId=" + resp.data.data + "&&fileName=保险返利台账报表-" + this.moment().format("YYYYMMDDHHmmss") + "&&fileType=xlsx";
						}
					}, resp => {});
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			handleCurrentChanges: function(currentPage) {
				debugger;
				this.$data.CurentPages = currentPage;
				//this.$data.dictGroup = '';
				this.query();
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.mapData.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length > 0) {
						this.$data.mapData.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {
					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				//获取功品牌下拉
			this.$http.get(this.API_ROOT + '/rbac/dept/brand/all', {}).then((response) => {
				this.$data.brandCombo = response.data.dataList;
			}, (response) => {});
			},
			//liebiaochaxun 
			query: function() {
				debugger;
				if(this.$data.mapData.date){
					this.$data.mapData.date = moment(this.$data.mapData.date ).format("YYYY-MM-DD");
				}else{
					this.$data.mapData.date = "";
				}
				
				this.$http.post(this.API_ROOT + '/insurance/statstics/rebate', this.$data.mapData,{
					params: {
						start: this.$data.CurentPages,
						limit: this.page.pageSize,
					}
				}).then(resp => {
					if(resp.data.success) {
						debugger;
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//新报差价计算
			sbcj: function(row ,column){
				return Number(Number(row.sbAllCommissionPrice) - Number(row.sbBackPrice)).toFixed(2);
			},
			//续保差价计算
			xbcj: function(row ,column){
				return Number(Number(row.xbAllCommissionPrice) - Number(row.xbBackPrice)).toFixed(2);
			},
			//累计新保差价计算
			lsbcj: function(row ,column){
				return Number(Number(row.sSbAllCommissionPrice) - Number(row.sSbBackPrice)).toFixed(2);
			},
			//累计续保差价计算
			lxbcj: function(row ,column){
				return Number(Number(row.sXbAllCommissionPrice) - Number(row.sXbBackPrice)).toFixed(2);
			},
		},
		created: function(){
		this.getarea();
			this.getBrand();
			this.getCompanyInfo();
			this.query();
			//获取按钮权限
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/login/btn', //url 输出 按照车牌号的 车牌号
				params: { //发送的参数
					resPath: "bx/rebateLedger", ////查询条件 按照输入的车牌号
				}
			}).then(function(resp) {
				debugger;
				var btnData = resp.data.dataList;

				var temp = {};

				for(var i = 0; i < btnData.length; i++) {

					var btnName = btnData[i].btnName;

					temp[btnName] = btnName;

				}

				Object.assign(this.$data.btnGroup, temp);
			}, function(error) {
				// error
			});
		},
		components: {
			exports
		}
	}
</script>

<style>
	.el-table .positive-row {
		background: #fb8e7c;
	}

</style>